<template>
<div class="sousuo">
	<div class="bar class-search">
  		<div class="searchbar">
  			<a class="icon icon-left sousuoBack" v-on:click="back"></a>
	    	<div class="search-input">
	      		<label  class="icon icon-search class-icon" for="search"></label>
	      		<input v-on:keydown.enter="searchFn" class="class-input" type="search" id='search' placeholder='请输入商品名字...'/>
	      		<span v-on:click="searchFn" class="searchMask"></span> <!-- 搜索按钮蒙版 -->
	    	</div>
	    	<div class="class-dis item-input">
	    		<div class="class-ul" v-on:click="sortFn">
					<div class="class-header-img">
						<span v-if="sortTxt=='综合排序'"><img  src="../images/port2.png">综合 </span>
		    			<span v-else-if="sortTxt=='销量最多'" ><img src="../images/port3.png">销量</span>
		    			<span v-else-if="sortTxt=='价格由低到高'" ><img src="../images/port1.png">价格</span>
		    			<span v-else><img  src="../images/port3.png">价格</span>
					</div>
	    		</div>
	    		<div class="class-ul2" v-on:click="sortDivHideFn" v-show="isSort">
	    			<ul>
		    			<li v-on:click="SortSynthesisFn">综合排序</li>
		    			<li v-on:click="SortSalesFn">销量最多</li>
			    		<li v-on:click="SortPriceLowHighFn">价格由低到高</li>
			    		<li v-on:click="SortPriceHighLowFn">价格由高到低</li>
	    			</ul>
	    		</div>	
	    	</div>
  		</div>
  		<div class="tip" v-show="isNull">请输入关键字</div>
  	</div>
  	<div class="sousuoDiv">
  		<ul class="con">
           <li v-for="(obj,i) in sousuoList" v-on:click="look(obj.id)" >
              <router-link to="/product"  >
                <div to="/product" >
                    <div class="images">
                        <img v-bind:src="obj.img">
                    </div>
                    <div class="about">
                       {{obj.name}}
                    </div>
                    <div class="nums">
                       {{obj.units}}
                    </div>
                    <div class="price">¥{{obj.price}}</div>
                </div>
                <div class="car">
                    <img src="../images/car.png">
                </div>
               </router-link> 
            </li>
        </ul>
        <div class="noDWDiv" v-show="iskw"><p>没有搜索到"{{keyword}}"请更改搜索关键字</p></div>
  	</div>

</div>
	
</template>
<script type="text/javascript">
	export default {
		props:["title"],
		data(){
			return {
				isNull:false,
				timer:null,
				sousuoList:[],
				isSort:false,
				keyword:"",
				iskw:false,
				sortTxt:"综合排序",
			}
		},
		created(){
			var arr=JSON.parse(localStorage.getItem("searchedList"))||[];
			if(arr.length){
				console.log(arr);	
				this.sousuoList=JSON.parse(localStorage.getItem("searchedList"));
			}
		},
		mounted(){
			$(".cartNone").hide();
		},
		methods:{//方法
			searchFn:function(){
				var _this=this;
				
				if($(".class-input").val()==""){
					this.isNull=true;
					clearTimeout(this.timer);
					_this.timer=setTimeout(function(){
						_this.isNull=false;
					},1000)
				}else{
					this.keyword=$.trim($(".class-input").val());
					this.getSjFn("kw");
					// $.ajax({
					// 	type:"get",
					// 	url:"http://localhost:8088/shop2/shousuo.php",
					// 	data:{type:"kw",keyword:$(".class-input").val()},
					// 	dataType:"json",
					// 	success:function(data){
					// 		if(data.data.length){
					// 			_this.sousuoList=[];
					// 			_this.iskw=false;
					// 			_this.sousuoList=data.data;
					// 		}else{
					// 			_this.sousuoList=[];
					// 			_this.iskw=true;
					// 		}
								
					// 	}
					// });
				}
			},
		    look:function(id){
		        localStorage.setItem("proId",id);
		    },
		    back:function(){
				history.back();
			},
			sortFn:function(){
				this.isSort=!this.isSort;
			},
			sortDivHideFn:function(){
				this.isSort=!this.isSort;
			},
			SortSynthesisFn:function(){
				this.sortTxt="综合排序";
			},
			SortSalesFn:function(){
				this.sortTxt="销量最多",
				this.getSjFn("salse");
			},
			SortPriceLowHighFn:function(){
				this.sortTxt="价格由低到高",
				console.log("SortPriceLowHighFn");
				this.getSjFn("priceLowHigh");
			},
			SortPriceHighLowFn:function(){
				this.sortTxt="价格由高到低",
				console.log("SortPriceHighLowFn");
				this.getSjFn("priceHighLow");
			},
			getSjFn:function(t){
				var _this=this;
					$.ajax({
						type:"get",
						url:"http://localhost:8088/shop2/shousuo.php",
						data:{type:t,keyword:$.trim($(".class-input").val())},
						dataType:"json",
						success:function(data){
							if(data.data.length){
								console.log(data.data);
								_this.sousuoList=[];
								_this.iskw=false;
								// 存储在本地存储里面
								var arr=[];
								data.data.forEach(function(obj){
									var proObj={id:obj.id,img:obj.img,name:obj.name,price:obj.price,units:obj.units};
									arr.push(proObj);
								});

								var str=JSON.stringify(arr);
								localStorage.setItem("searchedList",str);
								
								_this.sousuoList=JSON.parse(localStorage.getItem("searchedList"));
							}else{
								_this.sousuoList=[];
								_this.iskw=true;
							}
								
						}
					});
			}

		}
	}
</script>
<style type="text/css">
.noDWDiv{
	background-color:white;
	width: 100%;
	text-align: center;
}
.sousuoBack{
	width: 8%;
	margin-right: 2%;
}
.sousuoDiv{
	width: 100%;
	padding-top: 2.2rem;
}
	.searchMask{
	position: absolute;
	display: inline-block;
	width: 9%;
/*	background: black;*/
	height: 100%;
	z-index: 100;
	top: 0;
}
/*tip*/
.tip{
	display: inline-block;
	background-color: rgba(0,0,0,0.7);
	padding:.2rem 1rem;
	font-size: 0.6rem;
	border-radius: 1rem;
	position: fixed;
	left: 50%;top: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: white;
}
	.class-search{
		width: 100%;
	}
	.class-search .searchbar{
		background: white;
	}
	.class-search .search-input{
		background: rgba(32,32,32,0.07);
		color: black;
		border-radius: 20px;
		width: 75%!important;
		border: 0.01rem solid #ddd;
	}
	.class-search .class-dis{
		width: 16%;
	}
	.class-ul{
		width:100%;
		font-size: 0.5rem;
		line-height: 1.5rem;
	}
	.class-ul img{
		float: left;
		/*display: none;*/
		width: 1.2rem;
		height: 1.5rem;
	}
	.class-item-input{
		width: 1.4rem;
		overflow: hidden;
		padding-top: 0.6rem;
		color: green;
	}
	
	.class-ul2{
		position: fixed;
		top: 0%;
		right: 0%;
		width:100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
		z-index: 100;
	}
	.class-ul2 ul{	
		padding: 0 0.5rem;
		background: white;
		width: 40%;
		border: 0.01rem solid #ddd;
		position: absolute;
		right:1%;
		top: 2.3rem;
	}
	.class-ul2 li{
		border-bottom: 0.01rem solid #ddd;
		/*text-align: center;*/
		width: 100%;
		color: #999;
		padding: 0.66rem 0;
		font-size: 0.75rem;
	}


</style>
